<template>
	<div class="main">
		<top-bar></top-bar>
		<div class="main-box">
			<el-row class="main-container" :style="{minHeight:setHeight-70+'px'}">
			  <el-col :xs="24" :sm="4" :style="{minHeight:setHeight-72+'px'}">
			  	<side-bar></side-bar>
			  </el-col>
			  <el-col :xs="24" :sm="20" class="pad" :style="{minHeight:setHeight-72+'px'}">
			  	<router-view transition='fade' transition-mode='out-in'></router-view>
			  </el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
	import topBar from "./topBar" 
	import sideBar from "./sideBar" 
	export default{
		name: "app",
		components:{
			topBar,
			sideBar
		},
		computed:{
			setHeight(){
				return document.documentElement.clientHeight 
			}
		}
	}
</script>
<style scoped>
	.main{
		width: 100%;
		height: 100%;
		position: relative;
		min-width: 1190px;
	}
	.main-box{
		width: 100%;
		min-height: 100%;
		padding: 70px 6% 0;
		background: #ededed;
		position: absolute;
		top: 0;
		left: 0;
	}
	.main-container{
		width: 100%;
		height: 100%;
		/*border: 1px solid #e0e0e0;*/
		background: white;
	}
	.pad{
		padding: 0 20px;
	}
	.full-height{
		min-height: 100%;
	}
</style>